<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-26 10:30:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2 class="addUser-h2">添加用户</h2>
    <Row class-name="add-row">
      <Col span="8" class-name="add-col bot">
        <RadioGroup v-model="buttonSize" type="button">
          <Radio label="add">添加用户</Radio>
          <Radio label="put">更新用户</Radio>
        </RadioGroup>
        <!-- 添加用户 -->
        <div class="add-col-box" v-if="buttonSize==='add'">
          <Input v-model="addUserForm.user_name" placeholder="请输入用户名" style="width: 80%" />
          <Input v-model="addUserForm.user_pwd" placeholder="请输入密码" style="width: 80%" />
          <Select
            class="add-select"
            v-model="addUserForm.identity_id"
            style="width:40%"
            placeholder="请输入身份id"
          >
            <Option
              v-for="item in authority"
              :value="item.identity_id"
              :key="item.identity_id"
            >{{ item.identity_text }}</Option>
          </Select>
          <div class="add-submit">
            <Button size="large" type="primary" @click="submitUser">确定</Button>
            <Button @click="addUserForm={}">重置</Button>
          </div>
        </div>
        <!-- 更新用户 -->
        <div v-else>
          <Select
            class="add-select"
            v-model="putForm.user_id"
            style="width:40%"
            placeholder="请输入身份id"
          >
            <Option
              v-for="item in userData"
              :value="item.user_id"
              :key="item.user_id"
            >{{ item.user_name }}</Option>
          </Select>
          <Input v-model="putForm.user_name" placeholder="请输入用户名" style="width: 80%" />
          <Input v-model="putForm.user_pwd" placeholder="请输入密码" style="width: 80%" />
          <Select
            class="add-select"
            v-model="putForm.identity_id"
            style="width:40%"
            placeholder="请输入身份id"
          >
            <Option
              v-for="item in authority"
              :value="item.identity_id"
              :key="item.identity_id"
            >{{ item.identity_text }}</Option>
          </Select>
          <div class="add-submit">
            <Button size="large" type="primary" @click="submitPutUser">确定</Button>
            <Button @click="putForm={}">重置</Button>
          </div>
        </div>
      </Col>
      <Col span="8" class-name="add-col bot">
        <div>
          <Button type="info" ghost>添加身份</Button>
        </div>
        <Input v-model="addedit" placeholder="请输入身份名称" style="width: 80%" />
        <div class="add-submit">
          <Button size="large" type="primary" @click="submitAddEdit">确定</Button>
          <Button @click="addedit=''">重置</Button>
        </div>
      </Col>
      <Col span="8" class-name="add-col bot">
        <div>
          <Button>添加api接口权限</Button>
        </div>
        <Input v-model="auth.api_authority_text" placeholder="请输入api接口权限" style="width: 80%" />
        <Input v-model="auth.api_authority_url" placeholder="请输入api接口权限url" style="width: 80%" />
        <Input v-model="auth.api_authority_method" placeholder="请输入api接口权限方法" style="width: 80%" />
        <div class="add-submit">
          <Button size="large" type="primary" @click="submitAddAuthorityApi">确定</Button>
          <Button @click="auth = {}">重置</Button>
        </div>
      </Col>
    </Row>
    <Row class-name="add-row">
      <Col span="8" class-name="add-col">
        <div>
          <Button>添加试图接口权限</Button>
        </div>
        <Select
          class="add-select"
          :label-in-value="true"
          @on-change="setView"
          style="width:40%"
          placeholder="请选择已有视图"
        >
          <Option
            v-for="item in viewAuthority"
            :label="item.view_authority_text"
            :value="item.view_id"
            :key="item.view_authority_id"
          >{{ item.view_authority_text }}</Option>
        </Select>
        <div class="add-submit">
          <Button size="large" type="primary" @click="submitViewAuthority">确定</Button>
          <Button @click="viewAuthorityId=''">重置</Button>
        </div>
      </Col>
      <Col span="8" class-name="add-col">
        <div>
          <Button>给身份设置api接口权限</Button>
        </div>
        <Select
          class="add-select"
          v-model="viewApiAuthority.identity_id"
          style="width:40%"
          placeholder="请选择身份id"
        >
          <Option
            v-for="item in authority"
            :value="item.identity_id"
            :key="item.identity_id"
          >{{ item.identity_text }}</Option>
        </Select>
        <Select
          class="add-select"
          v-model="viewApiAuthority.api_authority_id"
          style="width:40%"
          placeholder="请选择api接口权限"
        >
          <Option
            v-for="item in apiAuthority"
            :value="item.api_authority_id"
            :key="item.api_authority_id"
          >{{ item.api_authority_text }}</Option>
        </Select>
        <div class="add-submit">
          <Button size="large" type="primary" @click="submitSetIdentityApi">确定</Button>
          <Button @click="viewApiAuthority={}">重置</Button>
        </div>
      </Col>
      <Col span="8" class-name="add-col">
        <div>
          <Button>给身份设置视图权限</Button>
        </div>
        <Select
          class="add-select"
          v-model="identityView.identity_id"
          style="width:40%"
          placeholder="请选择身份id"
        >
          <Option
            v-for="item in authority"
            :value="item.identity_id"
            :key="item.identity_id"
          >{{ item.identity_text }}</Option>
        </Select>
        <Select
          class="add-select"
          v-model="identityView.view_authority_id"
          style="width:40%"
          placeholder="请选择视图权限id"
        >
          <Option
            v-for="item in viewAuthority"
            :value="item.view_authority_id"
            :key="item.view_authority_id"
          >{{ item.view_authority_text }}</Option>
        </Select>
        <div class="add-submit">
          <Button size="large" type="primary" @click="submitSetIdentityView">确定</Button>
          <Button @click="identityView={}">重置</Button>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      addUserForm: {
        // 添加用户
        user_name: '',
        user_pwd: '',
        identity_id: ''
      },
      // 更新用户
      putForm: {
        user_id: '',
        user_name: '',
        user_pwd: '',
        identity_id: '',
        avatar: ''
      },
      model1: '', // 添加用户身份id
      cityList: [],
      buttonSize: 'add', // tap切换按钮
      addedit: '', // 添加身份名
      auth: {
        // 添加api接口权限
        api_authority_text: '',
        api_authority_url: '',
        api_authority_method: ''
      },
      // 添加视图权限名字/id
      viewAuthorityId: {
        view_authority_text: '',
        view_id: ''
      },
      viewApiAuthority: {
        // 给身份设置api接口
        api_authority_id: '',
        identity_id: ''
      },
      // 给身份设定视图权限
      identityView: {
        identity_id: '',
        view_authority_id: ''
      }
    }
  },
  computed: {
    ...mapState('AddUser', [
      'authority',
      'viewAuthority',
      'apiAuthority',
      'userData'
    ])
  },
  methods: {
    ...mapActions('AddUser', [
      'adduser',
      'getuseridentity',
      'addEdit',
      'addAuthorityApi',
      'getviewauthority',
      'addviewauthorityview',
      'getapiauthority',
      'setidentityapi',
      'setidentityview',
      'getuser',
      'putuser'
    ]),
    // 添加用户
    submitUser() {
      this.adduser(this.addUserForm)
    },
    // 更新用户
    submitPutUser() {
      this.putuser({
        user_id: this.putForm.user_id,
        user_name: this.putForm.user_name,
        user_pwd: this.putForm.user_pwd
      })
    },
    // 添加身份
    submitAddEdit() {
      this.addEdit({ identity_text: this.addedit })
    },
    // 添加api接口权限
    submitAddAuthorityApi() {
      this.addAuthorityApi(this.auth)
    },
    // 添加视图权限
    submitViewAuthority() {
      this.addviewauthorityview(this.viewAuthorityId)
    },
    // 存储视图权限值
    setView(val) {
      this.viewAuthorityId = {
        view_authority_text: val.label,
        view_id: val.value
      }
    },
    // 给身份设置api接口权限
    submitSetIdentityApi() {
      this.setidentityapi(this.viewApiAuthority)
    },
    // 给身份设置视图权限
    submitSetIdentityView() {
      this.setidentityview(this.identityView)
    }
  },
  created() {
    this.getuseridentity()
    this.getviewauthority()
    this.getapiauthority()
    this.getuser()
  }
}
</script>
<style lang="scss" scoped>
.addUser-h2 {
  margin: 30px 5px;
  color: #000;
}
.add-col {
  border: solid 1px #ccc;
  border-radius: 5px;
  height: 100%;
  line-height: 55px;
  padding-left: 10px;
  border-bottom: none;
}
.add-submit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  button {
    margin-right: 10px;
  }
}
.add-select {
  display: block;
  margin: 10px 0;
}
.add-row {
  border: solid 1px #ccc;
}
.ivu-btn {
  border: solid 1px #2d8cf0;
  color: #2d8cf0;
}
</style>
